<template>
	<div class="goods-item" @click="itemClick">
		<img :src="goodsItem.show.img" @load="imageLoad">
		<div class="goods-info">
			<p>{{goodsItem.title}}</p>
			<span class="price">{{goodsItem.price}}</span>
			<span class="collect">{{goodsItem.cfav}}</span>
		</div>	
	</div>
</template>

<script>
	export default {
		name:'GoodListItem',
		props:{
			goodsItem:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		methods:{
			imageLoad(){
				this.$bus.$emit('itemImageLoad')
			},
			itemClick(){
				this.$router.push('/detail/'+this.goodsItem.iid)
			}
		}
	}
</script>

<style scoped="scoped">
	.goods-item {
		position: relative;
		padding-bottom:40px ;
		width: 46%;
	}
	.goods-item img {
		width: 100%;
		
	}
	.goods-info {
		font-size: 12px;
		position: absolute;
		left: 0;
		bottom: 5px;
		right: 0;
		overflow: hidden;
		text-align: center;
	}
	.goods-info p {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.goods-info .price {
		color: var(--color-high-text);
	}
	.goods-info .collect{
		position: relative;
		margin-left: 20px;
	}
	.goods-info .collect::before{
		content: "";
		position: absolute;
		left: -15px;
		top: -1px;
		width: 14px;
		height: 14px;
		background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
	}
</style>
